<template>
	<view>
	
		<view class="g-login-wrapper">
			<view class="g-username">
				<text class="m-username">用户名:</text>
				<input class="m-input" type="text" value="" v-model="username" />
			</view>
			
			<view class="g-password">
				<text class="m-username">密码:</text>
				<input  class="m-input" type="password" value="" v-model="password" />
			</view>
			<view class="">{{message}}</view>
			<button class="m-btn" type="warn" @click="bindLogin">登录</button>
		</view>
	</view>
</template>

<script>
	import {baseURL,requestLogin} from '../../api/requestUtil'
	export default {
		data() {
			return {
				username:'root1',
				password:'123456',
				message:''
			}
		},
		methods: {
			bindLogin(){
				// 非常验证
				this.message = ''
				if(this.username == ''){
					this.message = '用户名不能为空'
				}else if(this.password == ''){
					this.message = '密码不能为空'
				}
				
				requestLogin(this.username,this.password).then(res=>{
					console.log('res :',res);
					const data = res.data
					if(data.code == 200){
						// 保存token
						uni.setStorageSync('token',data.token)
						// 跳转到 tabBar 页面只能使用 switchTab 跳转
						uni.switchTab({
							url:'/pages/home/home'
						})
					}
				})
				
			}
		},
		
	}
</script>

<style scoped>
.g-login-wrapper{
	padding: 10px;
	margin-top: 20px;
}
.g-username{
	border-bottom: 1px silver solid;
	display: flex;
}
.g-password{
	border-bottom: 1px silver solid;
	display: flex;
	margin-top: 20px;
}

.m-username{
	width: 20%;
}
.m-input{
	width: 60%;
}

.m-btn{
	margin-top: 40px;
	width: 80%;
}
</style>
